import styles from "@/views/trade/recharge/index.module.less";
import Vector from "@/assets/img/Vector.png";
import {
  drawerFormState,
  isChecked,
  isDisplay,
  operateType,
  withdrawRuleForm,
  wrapRef,
} from "../store";
import { modalConfig } from "./modal";
import { drawerConfig } from "../drawer";
export default defineComponent({
  setup() {
    const defineDrawer = drawerConfig();
    const showDrawer = () => (defineDrawer.visible.value = true);
    const handleAction = ({ record = {}, type = "" }: any = {}) => {
      operateType.value = type;
      const { title: drawerTitle } = defineDrawer;
      switch (trimAll(type)) {
        case "add":
          drawerTitle.value = $t("base.addWithdrawRule");
          showDrawer();
          break;
        case "update":
          drawerTitle.value = $t("base.editWithdrawRule");
          initObjAttr(drawerFormState, withdrawRuleForm, "target");
          drawerFormState.max_withdraw_count = !isEmptyType(
            delThousands(drawerFormState.max_withdraw_count)
          )
            ? delThousands(drawerFormState.max_withdraw_count)
            : undefined;
          drawerFormState.amount_list =
            drawerFormState?.amount_list?.split?.(",") ?? [];

          drawerFormState.max_withdraw_amount =
            +drawerFormState.max_withdraw_amount > 0
              ? drawerFormState.max_withdraw_amount
              : undefined;

          drawerFormState.max_withdraw_count =
            +drawerFormState.max_withdraw_count > 0
              ? drawerFormState.max_withdraw_count
              : undefined;

          isChecked[0] = !isEmptyType(drawerFormState.max_withdraw_amount);
          isChecked[1] = !isEmptyType(drawerFormState.max_withdraw_count);
          showDrawer();
          break;
      }
    };
    const defineModal = modalConfig();
    return () => (
      <div class={styles.wrap} ref={(el) => (wrapRef.value = el)}>
        {isDisplay.value ? (
          <div class={styles.warning}>
            <div class={styles.img_wrap}>
              <img src={Vector} />
            </div>
            <div class={styles.tips}>{$t("withdraw14")}</div>
            <s-button
              type="primary"
              onClick={handleAction.bind(this, { type: "add" })}
            >
              {$t("withdraw15")}
            </s-button>
          </div>
        ) : (
          <>
            <a-row class="s-drawer-extra-row">
              <a-col span={20}>
                <s-title>{$t("base.baseSet")}</s-title>
              </a-col>
              <a-col span={4} style="text-align: right">
                <s-button
                  onClick={handleAction.bind(this, {
                    record: {},
                    type: "update",
                  })}
                  type="primary"
                  size="small"
                  style="width: 55px"
                >
                  {$t("base.edit")}
                </s-button>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw19")}
                >
                  <i>{withdrawRuleForm.name}</i>
                </a-form-item>
              </a-col>
            </a-row>

            {/* <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw20")}
                >
                  <i>
                    {withdrawRuleForm.is_withdraw_amount_limit === 0
                      ? $t("withdraw24")
                      : $t("withdraw25") +
                        withdrawRuleForm.max_withdraw_count +
                        'USDT'}
                  </i>
                </a-form-item>
              </a-col>
            </a-row> */}
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.withdrawalSet")}</s-title>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw5")}
                  name="amount_list"
                >
                  <div class={styles.tag_list}>
                    {withdrawRuleForm?.amount_list
                      ?.split(",")
                      ?.map((item: any) => (
                        <a-tag color="#a1a1a1">
                          {{
                            icon: renderIcon(
                              "icon-meiyuan" + " " + styles.s_icon
                            ),
                            default: <i>{item}</i>,
                          }}
                        </a-tag>
                      ))}
                  </div>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw21")}
                >
                  <i>
                    {+withdrawRuleForm.is_withdraw_amount_limit === 0
                      ? $t("withdraw24")
                      : !isEmptyType(withdrawRuleForm.max_withdraw_amount) &&
                        +withdrawRuleForm.max_withdraw_amount > 0
                      ? `最高提现金额${withdrawRuleForm.max_withdraw_amount}USDT
                      `
                      : undefined}
                    {+withdrawRuleForm.is_withdraw_amount_limit === 0
                      ? undefined
                      : !isEmptyType(withdrawRuleForm.max_withdraw_count) &&
                        +withdrawRuleForm.max_withdraw_count > 0
                      ? `最高提现次数${
                          parseInt(withdrawRuleForm.max_withdraw_count) +
                          $t("base.rate")
                        }`
                      : undefined}
                  </i>
                </a-form-item>
              </a-col>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw22")}
                >
                  <i>
                    {withdrawRuleForm.is_handling_fee === 0
                      ? $t("withdraw26")
                      : withdrawRuleForm.handling_fee_percentage
                      ? withdrawRuleForm.handling_fee_percentage + "%"
                      : undefined}
                  </i>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row class="s-drawer-extra-row">
              <s-title>{$t("base.otherSet")}</s-title>
            </a-row>

            <a-row class="s-drawer-extra-row">
              <a-col span={24}>
                <a-form-item
                  labelCol={{ span: 2 }}
                  wrapperCol={{ span: 4 }}
                  label={$t("withdraw23")}
                >
                  <i>{withdrawRuleForm.comment}</i>
                </a-form-item>
              </a-col>
            </a-row>
          </>
        )}

        <s-drawer {...defineDrawer} />
        <s-modal {...defineModal} />
      </div>
    );
  },
});
